<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <link rel="stylesheet" href="./css/userCard.css">
    <link rel="stylesheet" href="../assets/notice/notice.css">
    <script src="../assets/notice/notice.js"></script>
    <script src="../assets/axios/axios.js"></script>
    <script src="./utils/request.js"></script>
    <script>
        // 请求报文头自定义属性参数
        //      原因：前后端分离开发的出现，分离开发必然在最终连接调试时会出现跨域请求问题，
        //            在http安全需求的限制范围下，常规登录权限校验功能很难保证数据安全(cookie,session),
        //            在安全的前提条件下需要一个可以保证安全的同时，实现类似于cookie,session 授权校验功能
        //      解决方案：手动构建类似于session功能的加密状态记录数据（token）

        // 公开请求 - 不需要特殊处理
        function login(){
            axios.get("http://127.0.0.1:3000/api/login")
                .then(function(data){
                    console.log(data);
                    sessionStorage.setItem("token",data.data.token)
                })
        }

        // 授权请求 - 需要在请求发送时手动携带授权字段
        //           token携带方式
        //              方式1:cookie -> 实际项目中几乎不会使用
        //              方式2:请求体参数 -> 将token直接作为请求参数进行发送
        //                              -> get 请求 token 会出现的url地址上
        //              方式3:自定义授权请求头（ Authorization ），取值=> "Bearer token字符串" 
        //                              ==> 服务器返回的结果token 已经增加的 "Bearer " 值
        //                              ==> 服务器返回的结果token 没有增加 "Bearer " 值
        function sendUser(){
            axios.get("http://127.0.0.1:3000/user/",{
                headers:{
                    // 当属性取值为 null 该请求头不会增加
                    Authorization:sessionStorage.getItem("token")
                }
            })
            .then(function(data){
                console.log(data);
            })
        }
    </script>
</head>
<body>
    <input type="button" value="login" onclick="login()">
    <hr>
    <input type="button" value="user" onclick="sendUser()">

</body>
</html>